import {useEffect, useState} from 'react';
import Taro from '@tarojs/taro';
import moment from "moment";
import {connect} from 'react-redux';
import {View, Text} from '@tarojs/components';
import {AtButton, AtIcon, AtTabs, AtTabsPane} from 'taro-ui';
import {Empty, Checkbox, Tag} from '@nutui/nutui-react-taro';

import './index.scss'

function Recharge(props) {
  const {dispatch, orderList: recordList = [], orderList2 = [], current} = props;
  const [selectList, setList] = useState([]);
  useEffect(() => {
    dispatch({
      type: 'invoice/init'
    })
  }, [dispatch]);

  function changeCurrent(val) {
    dispatch({
      type: 'invoice/setState',
      payload: {
        current: val
      }
    })
  }

  function day2weekday(timeStr) {
    const weekDay = moment(timeStr).format('d');
    switch (weekDay) {
      case "1":
        return <span>{moment(timeStr).format('YYYY-MM-DD HH:mm')}&nbsp;&nbsp;&nbsp;星期一</span>;
      case "2":
        return <span>{moment(timeStr).format('YYYY-MM-DD HH:mm')}&nbsp;&nbsp;&nbsp;星期二</span>;
      case "3":
        return <span>{moment(timeStr).format('YYYY-MM-DD HH:mm')}&nbsp;&nbsp;&nbsp;星期三</span>;
      case "4":
        return <span>{moment(timeStr).format('YYYY-MM-DD HH:mm')}&nbsp;&nbsp;&nbsp;星期四</span>;
      case "5":
        return <span>{moment(timeStr).format('YYYY-MM-DD HH:mm')}&nbsp;&nbsp;&nbsp;星期五</span>;
      case "6":
        return <span>{moment(timeStr).format('YYYY-MM-DD HH:mm')}&nbsp;&nbsp;&nbsp;星期六</span>;
      case "0":
        return <span>{moment(timeStr).format('YYYY-MM-DD HH:mm')}&nbsp;&nbsp;&nbsp;星期日</span>;
      default:
        return ''
    }
  }

  function invoiceCard(i, index) {
    const {
      createTime = '',
      stationName = '',
      actuallyAmount = '',
      orderNum = '',
      electricChargeAmount = 0,
      serviceChargeAmount = 0,
    } = i;
    return (
      <View className='cardWrap' key={index}>
        <View className='textLine'>
          { current === 0 ?  <View>
              <Checkbox
                checked={selectList.some((l) => l.orderNum === orderNum)}
                onChange={(val) => {
                  if (val) {
                    setList(selectList.concat([i]))
                  } else {
                    setList(selectList.filter((l) => l.orderNum !== orderNum))
                  }
                }}
              />
          </View>: <View className="infoTag">已申请</View>
            }
          <View>
            <View className='cardTitle'>
              <View>{day2weekday(createTime)}</View>
            </View>
            <View className='type'>{stationName}</View>
            <View>订单号: {orderNum}</View>
            <View>
              电费: <Text className='type'
                          style={{color: '#048FFF'}}>{electricChargeAmount ? (electricChargeAmount / 100).toFixed(2) : 0.00}元</Text>&nbsp;&nbsp;&nbsp;
              服务费: <Text className='type'
                            style={{color: '#048FFF'}}>{serviceChargeAmount ? (serviceChargeAmount / 100).toFixed(2) : 0.00}元</Text>
            </View>
          </View>
          <View className='money' style={{color: '#FA6400'}}>
            <Text
              style={{fontSize: '26rpx'}}>实付:</Text> {actuallyAmount ? (actuallyAmount / 100).toFixed(2) : 0.00}<Text
            style={{fontSize: '26rpx'}}>元</Text>
          </View>
        </View>
      </View>
    )
  }

  const tabList = [{title: '可开票'}, {title: '已申请'}]
  return (
    <View>
      <AtTabs current={current} tabList={tabList} onClick={(val) => changeCurrent(val)}>
        <AtTabsPane current={current} index={0} className='rechargeWrap'>
          <View className='listWrap'>
            {
              recordList && recordList.length ? [...recordList].map((i, index) => invoiceCard(i, index)) :
                <Empty description='暂无可开票订单' style={{backgroundColor: 'transparent', paddingTop: '100rpx'}}/>
            }
          </View>
          <View className='pageFooter'>
            <View className='firstLine'>
              已选择: <Text style={{fontSize: '36rpx', color: '#FA6400',}}>{selectList.length}</Text>单,
              共 <Text style={{fontSize: '36rpx', color: '#FA6400',}}>
              {(selectList.reduce((pre, cur) => parseFloat(cur.actuallyAmount) + parseFloat(pre), 0) / 100).toFixed(2)}</Text>元
            </View>
            <View className='secondLine'>
              <View className='priceInFooter'>

                <Checkbox
                  className="test"
                  label={selectList.length && selectList.length === recordList.length ? '取消全选' : '全选'}
                  checked={selectList.length && selectList.length === recordList.length}
                  onChange={(val) => {
                    if (val) {
                      setList([...recordList])
                    } else {
                      setList([])
                    }
                  }}
                />
              </View>
              <View className='buttonInFooter'>
                <AtButton
                  disabled={!selectList.length}
                  // loading={startLoading}
                  onClick={() => {
                    console.log('下一步');
                    dispatch({
                      type: 'invoice/setState',
                      payload: {
                        selectedOrders: [...selectList]
                      }
                    })
                    Taro.navigateTo({url: '/moduleA/pages/invoice/step2Index'})
                  }}
                >下一步</AtButton>
              </View>
            </View>
          </View>
        </AtTabsPane>
        <AtTabsPane current={current} index={1} className='rechargeWrap'>
          <View className='listWrap'>
            {
              orderList2 && orderList2.length ? [...orderList2].map((i, index) => invoiceCard(i, index)) :
                <Empty description='暂无数据' style={{backgroundColor: 'transparent', paddingTop: '100rpx'}}/>
            }
          </View>
        </AtTabsPane>
      </AtTabs>
    </View>
  )
}

export default connect(({invoice}) => {
  return {...invoice}
})(Recharge)
